<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title> js滑块 </title>
		<style type='text/css'>
			#range2 {
				position: relative;
				width: 148px;
				height: 2px;
				font-size: 0;
				line-height: 0;
				background: #eee;
				border: 1px inset #9C9B97
			}
			#mea {
				position: absolute;
				top: -5px;
				left: 0;
				width: 2px;
				height: 10px;
				border: 3px solid #fff;
				border-top: 13px solid #3f8e55;
			}
		</style>
	</head>

	<body>
		<div id='range2'>
			<div id='mea' onmousedown="change2(this,event)"></div>
		</div>
		<br />
		<span id="value2">5</span>
		<script type='text/javascript'>
			function change2(o, e) {
				var e = e ? e : window.event;
				if (!window.event) {
					e.preventDefault();
				}
				var tX = o.offsetLeft,
					dx = e.clientX;
				document.onmousemove = function(e) {
					var e = e ? e : window.event;
					var len = tX + e.clientX - dx;
					if (len >= 0 && len <= 140) {
						o.style.left = len + "px";
						document.getElementById('value2').innerHTML = 5 + Math.round(len / 7);
					}
				}
				document.onmouseup = function() {
					document.onmousemove = null;
					document.onmouseup = null;
				}
			}
		</script>
	</body>

</html>